<template>
  <div class="prince">
    <h4>{{name}}</h4>
    <img :src=imgsrc alt="">
    <div class="txt">
      {{txt}}
    </div>
  </div>
</template>
<script>
  // 定义全局指令
  /*Vue.directive('img',{
    inserted:function(el, binding){
      var color = Math.floor(Math.random()*1000000);
      el.style.backgroundColor = "#" + color;
      var img = new Image();
      img.src = binding.value; //获得传给指令的值
      img.onload = function(){
        el.style.backgroundImage = 'url(' + binding.value + ')';
      }
    }
  })*/

  import img from "../assets/xwz.jpg"

  export default {
    name: "prince",
    
    data(){
      return{
        name:"小王子",
        imgsrc: img,
        txt:"小王子，小说就是以他命名的，是一个神秘可爱的孩子。他住在被称作B-612小星球，是那个小星球唯一居民。小王子离别自己的星球和所爱的玫瑰花开始了宇宙旅行，最后来到了地球。在撒哈拉沙漠，小王子遇到小说的叙述者飞行员，并和他成了好朋友。在小说中小王子象征着希望、爱、天真无邪和埋没在我们每个人心底的孩子般的灵慧。虽然小王子在旅途中认识了不少人，但他从没停止对玫瑰的思念。"
      }
    }
  }
</script>
<style scoped>
  img{
    padding: 10px 0;
    max-width: 400px;
  }
  .txt{
    margin: 10px 0;
  }
</style>